<template>
	<view class="search-box">
        <!-- 使用 uni-ui 提供的搜索组件 -->
		<uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
        
        <!-- 搜索历史(当没有搜索列表数据时，展示搜索历史) -->
        <view class="history-box" v-if="searchResults.length === 0">
            <!-- 标题 -->
            <view class="history-title">
                <text>搜索历史</text>
                <uni-icons type="trash" size="17" @click='cleanHistory()'></uni-icons>
            </view>
            <!-- 列表区域 -->
            <view class="history-list">
                <uni-tag :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
            </view>
        </view>
        
        <!-- 搜索列表 -->
        <view class="sugg-list" v-else>
            <view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)">
                <view class="goods-name">{{item.goods_name}}</view>
                <uni-icons type="arrowright" size="16"></uni-icons>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 延时器的 timerId
				timer: null,
				// 搜索关键词
				kw: '',
                searchResults : [],
                // 搜索历史记录
                historyList: []
			};
		},
        onLoad() {
          // 从本地获取搜索历史记录
          this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')  
        },
        methods: {
            input(e) {
                // 清除 timer对应的延时器
                clearTimeout(this.timer)
                // 重新启动一个延时器，并把 TimerId赋值
                this.timer = setTimeout(() => {
                    // 500毫秒内没有重复触发 input方法，为关键字赋值
                    this.kw = e.value
                    this.getSearchList()
                }, 500)
            },
            async getSearchList(){
                if(this.kw === ''){
                    this.searchResults = []
                    return
                }
                const {data : res} = await uni.$http.get('/api/public/v1/goods/search', {query : this.kw})
                if(res.meta.status !== 200) {
                    return uni.$showMsg()
                }
                this.searchResults = res.message.goods
                
                // 搜索以后，在搜索历史中保留搜索关键字
                this.saveSearchHistory()
            },
            gotoDetail(goods_id){
                uni.navigateTo({
                    url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
                })
            },
            saveSearchHistory(){
                // this.historyList.push(this.kw)
                // 解决搜索关键词重复问题
                const set = new Set(this.historyList)
                set.delete(this.kw)// 已存在的话会先删除
                set.add(this.kw)
                this.historyList = Array.from(set)// set转 array
                // 调用 uni.setStorageSync()将搜索历史记录持久化存储到本地
                uni.setStorageSync('kw', JSON.stringify(this.historyList))
            },
            cleanHistory(){
                this.historyList = []
                // 清空本地历史记录
                uni.setStorageSync('kw', '[]')
            },
            gotoGoodsList(kw){
                uni.navigateTo({
                    url: '/subpkg/goods_list/goods_list?query=' + kw
                })
            }
        },
        computed:{
            historys(){
                // 数组属于是引用数据类型，我们翻转数组并不希望影响原数组的顺序，而是新建一个与原数组无关的数组，在进行反转
                // 扩展运算符，这里是一个深拷贝
                return [...this.historyList].reverse()
            }
        }
	}
</script>

<style lang="scss">
    
.history-box{
    padding: 0 5rpx;
    
    .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
    }
    
    .history-list {
        display: flex;
        flex-wrap: wrap;
        
        .uni-tag {
            margin-top: 5px;
            margin-right: 5px;
        }
    }
}

.search-box {
    position: sticky;
    top: 0;
    z-index: 999;
}

.sugg-list {
    padding: 0 5px;
    
    .sugg-item {
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .goods-name {
            // 文字不允许换行
            white-space: nowrap;
            // 溢出部分隐藏
            overflow: hidden;
            // 文本溢出后使用 ...
            text-overflow: ellipsis;
            margin-right: 3px;
        }
    }
}

</style>
